<template>
  <div style="padding:24px">
    <h2>欢迎，{{ auth.user?.email || '(未知)' }}</h2>
    <p>用户名：{{ auth.user?.username || '-' }}</p>
    <div style="margin:12px 0; display:flex; gap:8px">
      <button @click="diag">诊断 /user/me</button>
      <button @click="logout">退出登录</button>
    </div>
    <pre style="background:#0b1020;color:#c9e6ff;padding:12px;border-radius:8px;white-space:pre-wrap">
{{ diagText }}
    </pre>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { api } from '@/api'
export default {
  name: 'HomePage',
  setup() {
    const auth = useAuthStore()
    const diagText = ref('')
    const logout = () => { auth.logout(); location.href='/login' }

    const diag = async () => {
      const ls = localStorage.getItem('token')
      diagText.value = [
        '[DIAG] store.token =', auth.token || '(empty)',
        '\n[DIAG] localStorage.token =', ls || '(empty)'
      ].join(' ')
      try {
        const me = await api.get('/user/me')
        diagText.value += '\n[DIAG] /user/me OK: ' + JSON.stringify(me)
      } catch (e) {
        diagText.value += '\n[DIAG] /user/me ERR: ' + (e?.response?.status || '-') + ' ' + JSON.stringify(e?.response?.data || e.message)
      }
    }

    if (!auth.user && auth.token) auth.fetchMe().catch(()=>{})
    return { auth, logout, diag, diagText }
  }
}
</script>
